<template>
    <div class="bg-white d-flex align-items-center my-3 py-3">
        <div class="mx-2">
            <van-checkbox icon-size="24" v-model="data.isChecked" checked-color="#ee0a24"></van-checkbox>
        </div>
        <div class="d-flex">
            <img class="mx-2" :src="data.goods.goods_image" width="115" height="115" alt="" @click="$router.push(`/productionDetail/${data.goods_id}`)">
            <div>
                <p @click="$router.push(`/productionDetail/${data.goods_id}`)">
                    {{ data.goods.goods_name }}
                </p>
                <div class="d-flex justify-content-between">
                    <h5 class="my-auto" style="color:#f84f00;">
                        {{'￥' +  data.goods.goods_price_max }}
                    </h5>
                    <countNum v-model="data.goods_num" @input="value => updates(value,data.goods_id,data.goods_sku_id)"></countNum>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import countNum from '@/components/countNum.vue'
export default {
    name:'cartGoods',
    components:{
        countNum
    },
    props:{
        data:{
            type:Object,
            required:true
        }
    },
    methods:{
        async updates(value,id,skuId){
            this.$store.dispatch('cart/updateCartList',{
                value,id,skuId
            })
        }
    }
}
</script>

<style scoped lang="less">
@import url('@/style/bootstrap.css');
p{
    display:-webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>